<template>
  <div class="container">
    <div class="checkBtn">
      <div
        class="wrapper"
        @click="toRouteGetGoods"
      >
        <input
          class="input"
          type="radio"
          name="btn"
          value="option3"
        >
        <div class="btn">
          <span class="span">认领</span>
        </div>
      </div>
      <div
        class="wrapper"
        @click="toRouteHelpGoods"
      >
        <input
          class="input"
          type="radio"
          name="btn"
          value="option3"
        >
        <div class="btn">
          <span class="span">求助</span>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>

</template>

<script>
export default {
  data() {
    return {
      isMask: false,
    };
  },
  methods: {
    toRouteGetGoods() {
      this.$router.push("getgoods");
    },
    toRouteHelpGoods() {
      this.$router.push("helpgoods");
    },
  },

  mounted() {
    this.$store.dispatch("initFindCards");
    this.$store.dispatch("initHelpGoods");
  },
};
</script>

<style lang="less" scoped>
// 切换按钮

.container {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.checkBtn {
  display: flex;
  position: fixed;
  flex-direction: column;
  left: 13%;
  top: 15%;
  z-index: 3;
}

.wrapper {
  --font-color-dark: #323232;
  --font-color-light: #fff;
  --bg-color: #fff;
  --main-color: #3ad5ff;
  --shadow-color: #f6a5a7f0;
  position: relative;
  width: 43px;
  height: 100px;
  background-color: var(--bg-color);
  border: 2px solid var(--main-color);
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  box-shadow: 4px 4px var(--shadow-color);
  margin-bottom: 20px;
  .option {
    width: 80.5px;
    height: 28px;
    position: relative;
    top: 2px;
    left: 2px;
  }

  .input {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    appearance: none;
    cursor: pointer;
  }

  .btn {
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .span {
    color: var(--font-color-dark);
    writing-mode: vertical-lr; /* 从上到下，从左到右排列文字 */
    text-orientation: upright; /* 文字方向为正立 */
    white-space: nowrap; /* 禁止文字换行 */
    font-size: 1.3rem; /* 设置字体大小 */
  }

  .input:checked + .btn {
    background-color: var(--main-color);
  }

  .input:checked + .btn .span {
    color: var(--font-color-light);
  }
}
</style>